<template>
  <div>
    <!-- 头部开始 -->
    <div style="height: 60px; background-color: #202b78; display: flex; align-items: center;">
      <div style="width: 200px; display: flex; align-items:center; font-size: 20px; color: white; padding-left: 15px;">
        <img style="width: 40px;" src="@/assets/coffee.png" alt=""/>
        <span style="font-size: 20px; color: white; margin-left: 8px;">校园社团管理平台</span>
      </div>
      <div style="flex: 1"></div>
      <div style="width: fit-content; display:flex; align-items: center; padding-right: 10px;">
        <img
            :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
            alt=""
            style="width: 40px; height: 40px; border-radius: 50%;"
        />
        <span style="color: white; margin-left: 10px;">{{ data.user.name }}</span>
      </div>
    </div>
    <!-- 头部结束 -->

    <!-- 下面部分开始 -->
    <div style="display: flex;">
      <!-- 左侧导航菜单开始 -->
      <div style="width: 220px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px);">
        <el-menu
            router
            :default-active="router.currentRoute.value.path"
            :default-openeds="['1']"
            style="border: 0;"
            class="student-menu"
        >
          <el-menu-item index="/student/home">
            <el-icon><House /></el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="/student/clubs">
            <el-icon><OfficeBuilding /></el-icon>
            所有社团
          </el-menu-item>
          <el-menu-item index="/student/my-club">
            <el-icon><School /></el-icon>
            我的社团
          </el-menu-item>
          <el-menu-item index="/student/recruitment-application">
            <el-icon><Document /></el-icon>
            活动报名
          </el-menu-item>
          <el-menu-item index="/student/recruitment-registration">
            <el-icon><UserFilled /></el-icon>
            招募报名
          </el-menu-item>
          <el-menu-item index="/student/notification">
            <el-icon><Message /></el-icon>
            消息通知
          </el-menu-item>
          <el-menu-item index="/student/person">
            <el-icon><User /></el-icon>
            个人信息
          </el-menu-item>
          <el-menu-item index="/student/password">
            <el-icon><Lock /></el-icon>
            修改密码
          </el-menu-item>
          <el-menu-item @click="logout">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 左侧导航菜单结束 -->

      <!-- 右侧主体区域开始 -->
      <div style="flex: 1; width: 0; background-color: #f5f7fa; padding: 15px;">
        <RouterView @updateUser="updateUser" />
      </div>
      <!-- 右侧主体区域结束 -->
    </div>
    <!-- 下面部分结束 -->
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-pro-user")) || {}
});

const logout = () => {
  localStorage.removeItem("xm-pro-user");
  location.href = "/login";
};

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem("xm-pro-user")) || {};
};

</script>

<style>
.el-menu .is-active {
  background-color: #e6ecf7 !important;
}

.el-sub-menu__title {
  background-color: white !important;
}

.student-menu {
  font-weight: 600;
}
</style>